<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const titleDemo = ref(null)
onMounted(() => {
  const titleEcharts = echarts.init(titleDemo.value)
  const option = {
    title: {
      id: 1,
      show: true,
      text: 'echarts图形标题设置',
      link: 'https://element-plus.org/zh-CN',
      target: 'blank', // self自身窗口打开
      textStyle: {
        color: '#777', //颜色设置
        fontStyle: 'normal', // 字体设置
        fontWeight: '500',
        fontFamily: 'Arial',
        fontSize: 20,
        width: 150, // 文字长宽设置
        height: 100,
        lineHeight: 100,
        textBorderWidth: 2, // 设置文字周边携带效果
        textBorderType: 'solid', // 数组是指虚线实线循环效果
        // textBorderDashOffset: 5, // 整个虚线图案的偏移量
        textBorderColor: 'red',
        textShadowColor: 'green', // 设置文字的阴影效果
        textShadowBlur: 5,
        textShadowOffsetX: 5,
        textShadowOffsetY: 5,
        overflow: 'truncate',
        ellipsis: '...'
      },
      subtext: '富含子标题', // 子标题
      sublink: 'https://element-plus.org/zh-CN/component/overview',
      subtarget: 'self',
      subtextStyle: {
        color: '#777', //颜色设置
        fontStyle: 'normal', // 字体设置
        fontWeight: '500',
        fontFamily: 'Arial',
        fontSize: 20,
        width: 150, // 文字长宽设置
        height: 100,
        lineHeight: 100,
        textBorderWidth: 2, // 设置文字周边携带效果
        textBorderType: 'solid', // 数组是指虚线实线循环效果
        // textBorderDashOffset: 5, // 整个虚线图案的偏移量
        textBorderColor: 'red',
        textShadowColor: 'green', // 设置文字的阴影效果
        textShadowBlur: 5,
        textShadowOffsetX: 5,
        textShadowOffsetY: 5,
        overflow: 'truncate',
        ellipsis: '...',
        align: 'left', // 水平垂直位置设置
        verticalAlign: 'top'
      },
      backgroundColor: 'skyblue', // 文字块颜色
      left: '20', // 设置距离容器的四个方位,前两个有效
      top: '30',
      bottom: '23',
      right: '30',
      zlevel: 2, // 画布上的分层
      z: 1, // 画布内的分层，大的盖住小的
      // 定位相关的
      coordinateSystem: 'none', // 指定引用这个组件的的坐标系类型
      coordinateSystemUsage: 'box', // 指定使用的范围
      coord: [900, 300], // 当coordinateSystem不为none时,在坐标系中的位置
      calendarIndex: 1, // 争对日历坐标系指定,有多个日历坐标系时需要指定
      calendarId: 1, //争对日历坐标系指定,有多个日历坐标系时需要指定,id指定
      matrixIndex: 0, // 争对矩阵坐标系
      matrixId: 0,
      borderColor: 'green', // 文字块边框设置,类型不设置
      borderWidth: 2,
      borderRadius: 5,
      shadowBlur: 5, // 文字块的阴影
      shadowColor: 'black',
      shadowOffsetX: 3,
      shadowOffsetY: 2,
      // textAlgin: 'center', // 文字块内部文字center水平位置,设置后会改变title这个容器的基准点,与top等冲突
      // textVerticalAlign: 'bottom'
      itemGap: 200, // 主副标题间的间距
      triggerEvent: false // 是否是可触发事件
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  }
  titleEcharts.setOption(option)
})
</script>
<template>
  <div ref="titleDemo" class="title-demo"></div>
</template>
<style lang="scss" scoped>
.title-demo {
  width: 500px;
  height: 500px;
  background-color: lightblue;
}
</style>
